<template>
    <div class="app-container">
        <el-breadcrumb separator="/" class="breadcrumb2">
            <el-breadcrumb-item :to="{ path: '/home/home' }">教师签到活动</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/memberlist/memberlist' }">签到名单</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 名单列表 -->
        <el-card class="righttable">
            <i class="el-icon-tickets"></i>
            <span>名单列表</span>
            <el-button type="primary" size="small" style="float:right;" @click="addList()">新增名单</el-button>
            <el-table
            :data="listData"
            border
            stripe
            style="width: 100%;margin-top:20px;"
            :default-sort="{ prop: 'date', order: 'descending' }"
            >
            <el-table-column
                type="index"
                min-width="80"
                align="center">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名单名称"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                    <span class="link" @click="openmember(scope.row)">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-tab5le-column
                prop="number"
                label="名单人数"
                min-width="100"
                align="center">
            </el-tab5le-column>
            <el-table-column
                label="操作"
                align="center"
            >
                <template slot-scope="scope">
                <div>
                    <el-button type="warning" size="small" @click="gotoEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteList(scope.row)">删除</el-button>
                </div>
                </template>
            </el-table-column>
            </el-table>
            <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next,jumper"
                :current-page.sync="formInline.pageNum"
                :page-size="formInline.pageSize"
                :page-sizes="[5, 10, 15]"
                :total="total"
            ></el-pagination>
            </div>
        </el-card>
        <!-- 查看名单的对话框-->
        <el-dialog
            title="名单成员"
            :visible.sync="lookdialogVisible"
            width="30%">
            <el-table
                :data="looktableData"
                height="250"
                border
                stripe
                style="width: 100%">
                <el-table-column
                type="index"
                min-width="80"
                align="center">
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名"
                min-width="150"
                align="center">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="lookdialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 新增名单的对话框-->
        <el-dialog
          title="新增名单"
          :visible.sync="newdialogVisible"
          width="800px"
        >
          <a
            @click="downloadxls()"
            style="color: #419eff; border-bottom: 0.5px dotted #419eff"
            >下载模板</a
          >
          <div style="text-align: center">
            <el-upload
              class="upload-demo"
              drag
              action="https://www.xqzjgsu.top:8001/list/excel"
              :on-change="handleChange"
              :on-success="handleSuccess"
              :headers="headers"
              :data="listDataforexcel"
              name="list"
              ref="upload"
              accept=".xls,.xlsx"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将xls/xlsx文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </div>
          <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="newdialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 分页
            formInline: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 0,
            //名单列表数据
            listData:[],
            //名单成员数据
            looktableData:[
            ],
            //查看名单成员对话框
            lookdialogVisible:false,
            uid:'',
            //新增名单对话框
            newdialogVisible:false,
            headers: {
                Authorization: 'Bearar ' + sessionStorage.getItem('Authorization'),
            },
            listDataforexcel: {
                listName :'' ,
                uid: '' ,
            },

        }
    },
    created(){
        this.uid=sessionStorage.getItem("teacheruid");
        this.listDataforexcel.uid=sessionStorage.getItem("teacheruid");
        this.getList()
    },
    methods:{
        //下载模板
        downloadxls(){
            window.location.href = process.env.BASE_URL + '名单模板.xls'
        },
        //获取申请记录表
        async getList(){
            const { data: res } = await this.$http.get('/list/get', {
                params: {
                    pageNum:this.formInline.pageNum,
                    pageSize:this.formInline.pageSize,
                    uid:this.uid
                },
            })
            if(res!=null){
                // console.log("名单数据",res)
                this.listData=res.data.list;
                this.total=res.data.total
            }
        },
        gotoEdit(data){
            this.$router.push({
                path:'/home/memberlist/editmemberList',
                query:{
                    listId:data.id,
                    listname:data.name
                }
            })
        },
        addList(){
            this.newdialogVisible=true
        },
        //删除名单
        async deleteList(data1){
            this.$confirm('此操作将删除选中的成员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$http.get('/list/del', {
                    params: {
                        listId:data1.id
                    },
                })
                if(res.code==200){
                    this.$message({
                        type: 'success',
                        message: "删除成功",
                    })
                    this.getList()
                }
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
                });
            });

        },
        //查看名单成员
        async openmember(data1){
            const { data: res } = await this.$http.get('/list/getMember', {
                params: {
                    listId:data1.id
                },
            })
            if(res!=null){
                this.looktableData=res.data
                this.lookdialogVisible=true
            }
        },
        //处理文件上传
        handleChange(file,fileList){
            var filenamesplit=file.name.split(".")
            this.listDataforexcel.listName=filenamesplit[0]
        },
        //处理文件成功，再次获取数据
        handleSuccess(e){
            this.getList()
            this.newdialogVisible=false
            if(e.code==200){
                this.$message({
                    type: 'success',
                    message: e.message,
                })
            }else{
                this.$message({
                    type: 'error',
                    message: e.message,
                })
            }
        },
        // 实现分页
        // 更改了每页大小
        handleSizeChange(val) {
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.getList()
        },
        // 更改了第几页
        handleCurrentChange(val) {
            this.formInline.pageNum = val
            this.getList()
        },

    }
}
</script>

<style scoped>
    .link{
        color: #525dd8;
    }
    .link:hover{
        color: #8b80dc;
        cursor: pointer ;
    }
</style>
